import React from 'react'
import ApiRow from './ApiRow'
import GroupTabs from './GroupTabs'
import { useGroup } from './useGroup'

export interface IGroupListProps {}

const GroupList: React.FC<IGroupListProps> = ({}) => {
    // 组数据
    const { apiItems, updateGroupId } = useGroup()

    return (
        <div className='h-full flex flex-col'>
            {/* tabs */}
            <GroupTabs
                className='mt-1 border-b-1 border-b-solid border-gray-200'
                onSelectedGroupChange={(id) => updateGroupId(id)}
            />
            {/* 内容 */}
            <div className='min-h-[200px] flex-1 overflow-y-auto px-2'>
                {apiItems?.map((item) => {
                    return <ApiRow key={item.id} apiItem={item} />
                })}
            </div>
        </div>
    )
}

export default GroupList
